<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
   <!--  注意组件的层级而去优先注册子组件，不要先注册父子件而后去注册子组件，里面会因为调用子组件时由于代码执行顺序而产生报错 -->
</head>
<body>
    <div id="root">

    </div>
</body>
<script>
        const student=Vue.extend({
        template:`
        <div>
        <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>    
        </div>
        `,
        data(){
            return{
                studentName:'轨迹',
                age:21,
            }
        }
    })
    const school=Vue.extend({
        template:
            `<div>
              <h2>学校名称:{{schoolName}}</h2>
              <h2>学校地址：{{address}}</h2>
              <student></student>    
            </div>`
        ,
        data() {
            return {
                schoolName:'西安邮电大学',
                address:'陕西西安',
            }
        },
        components:{
            student,
        }
    });

    const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到长安！'
				}
			}
		})
		
		//定义app组件
	const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

    new Vue({
      template:`<app></app>`,
      el:'#root',
      components:{
        app,
      }
    })
</script>
</html>